<template>
	<div class="index">
		<el-container>
			
			<template  v-if="routerPath==''" >
				<div :class="isBg==1?'header_box_bg1': isBg==2?'header_box_bg2':isBg==3?'header_box_bg3':'header_box_bg4'">
			  		<myHeader></myHeader>		  	
				</div>
				<el-main>		
					<div class="banner banner_big">
						<swiper :options="swiperOption" ref="mySwiper">
						<swiper-slide v-for="items in detail" >
							<div class="banner_index" @mouseenter="mouseover(items)" @mouseleave="mouseleave(items)">
								<!-- <img v-if="!items.back"  :src="items.imgs" alt="">
								<img class="img_back" v-if="items.back" :src="items.backimgs" alt=""> -->
								<img   :src="items.imgs" alt="">
								<img class="img_back" :src="items.backimgs" alt="">	
							</div>
						</swiper-slide>
						
						<div class="swiper-pagination" slot="pagination"></div>
						</swiper>
						<a id="swiper-button-prev" class="swiper-button-prev"></a>
						<a id="swiper-button-next" class="swiper-button-next"></a>
						<div class="jc"></div>
					</div>
					
					<el-tabs v-model="activeName"  @tab-click="handleClick">
					    <el-tab-pane v-for="(item,index) in tradingarea" :labelkey="item.tradingname" :label="item.tradingname+(item.isInves?'':'交易区')" :name="item.name">
					    	<el-table v-if="item.isOpen"  :data="list"   style="width: 100%" :ref="item.tradingname">
							    <el-table-column   prop="currname"     :label="'币种对'+item.tradingname" >
							    </el-table-column>
							    <el-table-column   prop="price" label="价格" sortable>
							    </el-table-column>
							    <el-table-column   prop="dealnum" label="交易量">
							    </el-table-column>
						        <el-table-column   prop="pricetotal" label="总市值">
						        	<template slot-scope="scope">
						            	<span>￥{{scope.row.pricetotal}}	</span>				       
						        	</template>
							    </el-table-column>
						        <el-table-column   prop="dealnum" label="涨跌">
						        	<template slot-scope="scope">
						            	<span :class="scope.row.dealnum>0?'isRed':'isGreen'">{{scope.row.dealnum}}%	</span>				       
						        	</template>
							    </el-table-column>
							     <el-table-column   prop="trendmap" label="趋势图">
							     	<template slot-scope="scope">
										<div v-if="!item.isInves" :id="'myChart'+item.tradingname+scope.$index" class="myChart" :style="{width: '127px', height: '40px'}"></div>
										<div v-if="item.isInves" :id="'myChart'+item.tradlabel+scope.$index" class="myChart" :style="{width: '127px', height: '40px'}"></div>
							     		
							     	</template>
							    </el-table-column>
							    <el-table-column label="操作">
						            <template slot-scope="scope">					       
						              <span class="span_btn"  @click="handleDeal(scope.$index, scope.row)" >专业交易</span>				           
						             
						            </template>
					            </el-table-column>
						    </el-table>
						    <div v-if="!item.isOpen" class="notOpen">暂未开放，敬请期待</div>
					    </el-tab-pane>
						  
					</el-tabs>
					<div class="ad_area"></div>
					<div class="websit_notice">
						<div class="notice_title">
							<span class="notice_title_l">网站公告</span>
							<a class="notice_title_r" href="">
								<span >查看更多</span>
								<img src="../assets/img/more.png">
							</a>
						</div>
						<div class="notice_ul">
							<div class="notice_list" v-for="item in noticeData">
								<span class="notice_list_title"><a href="">{{item.noticetitle}}</a></span>
								<span class="notice_list_time">{{item.time}}</span>
							</div>
						</div>
					</div>
					<div class="link_index">
						<div class="banner banner_link">
							<swiper :options="swiperOption1" ref="mySwiper1">
							<swiper-slide v-for="items in detail1" >
								<div class="banner_index">
									<!-- <img v-if="!items.back"  :src="items.imgs" alt="">
									<img class="img_back" v-if="items.back" :src="items.backimgs" alt=""> -->
									<img   :src="items.imgs" alt="">
									<img class="img_back" :src="items.backimgs" alt="">	
								</div>
							</swiper-slide>
							
							</swiper>
							<a id="swiper-button-prev1" class="swiper-button-prev"></a>
							<a id="swiper-button-next1" class="swiper-button-next"></a>
							<div class="jc"></div>
						</div>
						<div class="banner banner_link">
							<swiper :options="swiperOption2" ref="mySwiper1">
							<swiper-slide v-for="items in detail1" >
								<div class="banner_index">						
									<img   :src="items.imgs" alt="">
									<img class="img_back" :src="items.backimgs" alt="">	
								</div>
							</swiper-slide>
							
							</swiper>
							<a id="swiper-button-prev2" class="swiper-button-prev"></a>
							<a id="swiper-button-next2" class="swiper-button-next"></a>
							<div class="jc"></div>
						</div>
					</div>
					<div class="volume">
						<div class="volume_item volume_hht">
							<span class="volume_num">526955.8816</span>
							<span class="volume_alt">24H HHT Volume</span>
						</div>
						<div class="volume_item volume_btc">
							<span class="volume_num">526955.8816</span>
							<span class="volume_alt">24H BTC Volume</span>
						</div>
						<div class="volume_item volume_eth">
							<span class="volume_num">526955.8816</span>
							<span class="volume_alt">24H ETH Volume</span>
						</div>
					</div>
				
			  	</el-main>
			</template>
		  	<template v-else>
		  		<myHeader></myHeader>		  	

		        <router-view></router-view>
	        </template>


		  	<el-footer height="152">
		  		<!-- <div class="el-footer"> -->
		  		<div class="footer_box">
			  		<div class="footer_item">
			  			<div class="footer_item_title"><a href="">下载支持</a></div>
			  			<div class="footer_item_list">
			  				<span><a href="">API文档</a></span>
			  				<span><a href="">API下载</a></span>
			  			</div>
			  		</div>
			  		<div class="footer_item">
			  			<div class="footer_item_title"><a href="">客服服务</a></div>
			  			<div class="footer_item_list">
			  				<span><a href="">使用教程</a></span>
			  			</div>
			  		</div>
			  		<div class="footer_item">
			  			<div class="footer_item_title"><a href="">常见问题</a></div>
			  			<div class="footer_item_list">
			  				<span><a href="">服务协议</a></span>
			  			</div>
			  		</div>
			  		<div class="footer_item">
			  			<div class="footer_item_title"><a href="">本站公告</a></div>		  			
			  		</div>
			  		<div class="footer_item">
			  			<div class="footer_item_title"><a href="">联系我们</a></div>		  			
			  		</div>
		  		</div>
		  		<div class="copyright">hht.one 版权所有 @ 2018</div>
		  	<!-- </div> -->
		  	</el-footer>
		</el-container>
	</div>	
</template>
<script>
import Swiper from 'vue-awesome-swiper';
import Schart from 'vue-schart';
import myHeader from './common/header'
	export default {
		components:{
	        Schart,myHeader
	    },
		data(){
			return {			
			 	routerPath:'',
				isBg:1,
				tradingarea:[
					{tradingname:"BTCX",name:'first',isOpen:true,isInves:false},
					{tradingname:"HHT",name:'second',isOpen:true,isInves:false},
					{tradingname:"BTC",name:'third',isOpen:true,isInves:false},
					{tradingname:"ETH",name:'fourth',isOpen:true,isInves:false},
					{tradingname:"USDT",name:'five',isOpen:true,isInves:false},
					{tradingname:"CET",name:'six',isOpen:false,isInves:false},
					{tradingname:"考察区" ,tradlabel:'inves',name:'seven',isOpen:true,isInves:true},
					],
				list:[
				{currname:"BTCX/TTC",price:'$0.16',dealnum:'946179.4494',pricetotal:'4192667.6631',dealnum:'-0.17',trendmap:'',data:[0.2,0.4,0.6,0.8]},
				{currname:"BTCX/TTC",price:'$0.16',dealnum:'946179.4494',pricetotal:'4192667.6631',dealnum:'0.87',trendmap:'',data:[-0.7,-0.8,-0.9,-1]},
				],
				swiperOption: {			
					// pagination : '.swiper-pagination',
					pagination: {
					    el: '.swiper-pagination',
				  	},
				  	navigation: {
						nextEl: '#swiper-button-next',
						prevEl: '#swiper-button-prev',
					},
   					paginationClickable :true,
					autoplay: true,
					slidesPerView: 3,
					slideToClickedSlide: true,
					autoplayDisableOnInteraction: false,
					loop: false,
					coverflow: {
					　　rotate: 30,
					　　stretch: 10,
					　　depth: 60,
					　　modifier: 2,
					　　slideShadows : true
				　　}
				},
				swiperOption1: {			
				  	navigation: {
						nextEl: '#swiper-button-next1',
						prevEl: '#swiper-button-prev1',
					},
   					paginationClickable :true,
					autoplay: true,
					slidesPerView: 5,
					slideToClickedSlide: true,
					autoplayDisableOnInteraction: false,
					loop: false,
					coverflow: {
					　　rotate: 30,
					　　stretch: 10,
					　　depth: 60,
					　　modifier: 2,
					　　slideShadows : true
				　　}
				},
				swiperOption2: {			
				  	navigation: {
						nextEl: '#swiper-button-next2',
						prevEl: '#swiper-button-prev2',
					},
   					paginationClickable :true,
					autoplay: true,
					slidesPerView: 5,
					slideToClickedSlide: true,
					autoplayDisableOnInteraction: false,
					loop: false,
					coverflow: {
					　　rotate: 30,
					　　stretch: 10,
					　　depth: 60,
					　　modifier: 2,
					　　slideShadows : true
				　　}
				},
				detail:[
				{imgs:require('../assets/img/item_banner1.jpg'),backimgs:require('../assets/img/item_banner1_back.jpg'),back:false,isBg:1},
				{imgs:require('../assets/img/item_banner2.jpg'),backimgs:require('../assets/img/item_banner2_back.jpg'),back:false,isBg:2},
				{imgs:require('../assets/img/item_banner3.jpg'),backimgs:require('../assets/img/item_banner3_back.jpg'),back:false,isBg:3},
				{imgs:require('../assets/img/item_banner4.jpg'),backimgs:require('../assets/img/item_banner4_back.jpg'),back:false,isBg:4},
				],
				detail1:[
				{imgs:require('../assets/link/beeseno.png')},
				{imgs:require('../assets/link/bikuai.png')},
				{imgs:require('../assets/link/bkex.png')},
				{imgs:require('../assets/link/capital.png')},
				{imgs:require('../assets/link/coin.png')},
				{imgs:require('../assets/link/fengniao.png')},
				{imgs:require('../assets/link/link_icon.png')},
				],
				noticeData:[
					{noticetitle:'公告标题1',time:'2018-01-10'},
					{noticetitle:'公告标题2',time:'2018-01-10'},
					{noticetitle:'公告标题3',time:'2018-01-10'},
				],
			   // activeIndex:'0',
			   activeName: 'first',
			   mySwiper:'',
			}
		},
	    methods: {
	    	chartSet(obj,i){
	    		console.log(i)
	    		let chartdata=[];
	    		if(this.list[i]){
	    			
	    			chartdata=this.list[i].data;
	    		}
	    		console.log(chartdata)
	    		  // 绘制图表
			        obj.setOption({
			            title: { text: 'bbb' },
			            tooltip: {},
			            xAxis: {
			            	// show:false,
					        type: 'category',
					        boundaryGap: false,
					        data: ['0', '1', '2', '3']
					    },
					    yAxis: {
					    	// show:false,
					        type: 'value',
					        min:-2,
					        max:2,
					        length:'10',
					        axisTick:{length:'10'},
					    },
					    color:['#409EFF'],
					    grid:{
					    	borderWidth:0,
					    },

					    series: [{
					    	symbol: "none",
					    	// center:[0,0],
					        // data: [0, 0.9, 0.5, 0.7],
					        data:chartdata,
					        type: 'line',
					        // areaStyle: {},
					     //    itemStyle:{
	  							// normal: {
						    //         color: new this.$echarts.graphic.LinearGradient(
						    //             0, 0, 0, 1,
						    //             [
						    //                 {offset: 0, color: 'red'},
						    //                 {offset: 0.5, color: 'pink'},
						    //                 {offset: 1, color: '#ddd'}
						    //             ]
						    //         )
						    //     }
					     //    },
				          
					    }]
			          
			        });
	    	},
	 	 	drawLine(index){
		        // 基于准备好的dom，初始化echarts实例
		        let ref='';
	          	this.$nextTick(() => {
	          		ref=this.$refs;
		   			let chartEle=document.getElementsByClassName('myChart');
		   			console.log(index)
		  			// for(var i=0;i<chartEle.length;i++){
		  			for(var i=0;i<this.list.length;i++){
		  				console.log(chartEle[i].id)
		  				let idname='myChart'+index+i;
		  				console.log(idname)
			  			this.chartSet(this.$echarts.init(document.getElementById(idname)),i)
			  		}			
			      
				});
		        
		  	
		    },
		    handleDeal: function (index, row) {
		    },
	    	mouseleave(items){
	    		//小banner图鼠标离开时
	    		this.mySwiper.autoplay.start();
	    		items.back=false;
	    	},
	    	mouseover(items){

	    		this.mySwiper.autoplay.stop();
	    		items.back=true;
	    		this.isBg=items.isBg;
	    	},
	      	handleSelect(key, keyPath) {
	       	 	console.log(key, keyPath);
	      	},
	      	handleClick(tab, event) {
		        console.log(tab, event);
		        console.log(this.tradingarea[tab.index].tradingname);
				// this.list.data=[0,0.1,0.2,0.3];
				this.list.map(x=>{
					x.data=[0,0.1,0.2,0.3]
				})
				if(this.tradingarea[tab.index].isOpen){
					if(this.tradingarea[tab.index].isInves){
						this.drawLine(this.tradingarea[tab.index].tradlabel);

					}else{
						this.drawLine(this.tradingarea[tab.index].tradingname);

					}

				}
	        },
	        fetchData(){
	        	this.list=this.list;
				this.drawLine(this.tradingarea[0].tradingname);

	        },
	    },
    	watch: {
		      // 如果路由有变化，会再次执行该方法
		      "$route": function(){
		        this.routerPath=this.$route.path.split("/").pop();

		      }
	  	},
	    mounted () {  
	    	console.log(this.routerPath)
	    	if(this.routerPath=="/" || this.routerPath==""){
	    		this.mySwiper=this.$refs.mySwiper.swiper;
				this.mySwiper1=this.$refs.mySwiper1.swiper;
	    	}
			
		 
			
		  },  
		  created(){

    		this.routerPath=this.$route.path.split("/").pop();
    		console.log(this.routerPath)
			if(this.routerPath==""){
			  	this.fetchData();
			  		
		  	}

		  }
	}
</script>
<style>
body{
    background: #f5f4f9;
}
.banner{height:250px;background: #fff;border-radius: 8px;/*padding:20px;*/position: relative;}
.banner_link{height: 124px;}
.img_back{
	    transform: rotateY(180deg);	
	    -webkit-transform: rotateY(180deg) translateZ(1px);
	    /*transform-origin: center center; */
}
.header_box_bg1{
	background: url("../assets/img/banner1.jpg");
    height: 710px;
    background-size: 100% auto;
}
.header_box_bg2{
	background: url("../assets/img/banner2.jpg");
    height: 710px;
    background-size: 100% auto;
}
.header_box_bg3{
	background: url("../assets/img/banner3.jpg");
    height: 710px;
    background-size: 100% auto;
}
.header_box_bg4{
	background: url("../assets/img/banner4.jpg");
    height: 710px;
    background-size: 100% auto;
}
.banner_big .swiper-wrapper{height:250px;}
.el-main{max-width:1200px;margin: -170px auto 0;background: #f5f4f9;padding:0;border-radius: 8px;}
.banner_index{height:124px;width:200px;margin:0 auto;position: relative;}
.banner_big .banner_index{
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transition: all 1.2s ease;
    transition: all 1.2s ease;
    
    height:200px;
    width:350px;
}
.banner_index img{position: absolute;top:0;left: 0;right:0;max-height: 100%;max-width: 100%;}
.banner_big .swiper-container .swiper-slide:hover .banner_index{
    transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
    /*transform-origin: center center; */

}
.el-tabs{margin-top:20px;}
.ad_area{
    width: 100%;
    height: 200px;
    margin-top: 20px;
    background: url(../assets/img/adv_1.png) no-repeat;
    background-size: 100% 100%;
    cursor: pointer;
}
.websit_notice{
	margin-top:20px;
	background: #fff;
	padding:0 20px;
	min-height: 200px;
}
.notice_title{
    border-bottom: 1px solid #dcdcdc;
    height: 50px;
    line-height: 50px;
    font-size: 18px;
    color: #1e2631;
    text-align: left;
}
.notice_title_r{float:right;font-size: 14px;    color: #999;text-decoration: none;}
.notice_title img{    vertical-align: middle;}
.notice_ul{display: flex;flex-flow: wrap;}
.notice_list{width:50%;display: flex;justify-content: space-between;padding:10px 20px; box-sizing: border-box;}
.notice_list_time{color:#999;}
.banner_big .swiper-container{padding:20px;height:100%;box-sizing: border-box;}
.swiper-button-prev,.swiper-button-next,.swiper-button-prev1,.swiper-button-next1{width:20px;height:30px; }
.swiper-button-prev,.swiper-button-prev1{
	   background: url('../assets/img/left-arrow.png') no-repeat;

}
.swiper-button-next,.swiper-button-next1{
	   background: url('../assets/img/right-arrow.png') no-repeat;
}
.link_index,.volume{margin-top:20px;}
.volume{
	background: #fff;
	display: flex;
	justify-content: space-around;
}
.volume_item{
	padding:0 73px;
	margin:89px 0;
    width: 33.33%;
}
.volume_item span{display: block;}
.volume_btc{border:2px solid #86acd0;border-width:0 2px 0 2px;}
.volume_num{    text-align: center;
    font-size: 18px;
    font-weight: 700;}
.volume_alt{    font-size: 12px;
    color: #999;
    margin-top: 10px;
    text-align: center;}
</style>